<template>
	<view>
		<view class="desc-box" v-for="(item, index) in list.data" :key="index">
			<slot>
				<view class="desc-list" :class="{'desc-list_poster' : counselData.type == 'poster'}" @click="goDetail(item)">
					<view class="update_con_title ellipsis_two_line_com title" v-if="counselData.type == 'poster' && item.copywriting">{{ item.copywriting }}</view>
					<view class="desc-img_box" :class="{'desc-poster_box' : counselData.type == 'poster'}" v-if="['case','poster'].indexOf(counselData.type)>=0">
						<!-- 案例 -->
						<img v-if="['case'].indexOf(counselData.type)>=0" :src="`${item[counselData.myKey.images]}?x-oss-process=image/resize,m_fill,h_480,w_1065`" alt="图片" mode="aspectFill" />
						<!-- 海报 -->
						<img v-if="['poster'].indexOf(counselData.type)>=0" :src="`${item[counselData.myKey.images]}?x-oss-process=image/resize,m_fill,h_1188,w_429`" alt="图片" mode="aspectFill" />
						<view v-if="counselData.type==='case'" class="roomInfo">
							{{ item.acreage }} | {{ item.room }} | {{item.case_style_name }}
						<!-- | {{ item.price }}-->
						</view>
					</view>
					<view class="desc-info_box">
						<div :class="{'article_wrap' : counselData.type == 'article'}">
							<h3 v-if="['case','article'].indexOf(counselData.type)>=0">
								<span v-if="counselData.type == 'case'" :class="[item.is_public ===1?'':'red_tit']">{{ item.is_public ===1?'平台':'' }}</span>
								{{ item[counselData.myKey.title] }}
							</h3>
							<div class="article_img_wrap" v-if="['article'].indexOf(counselData.type)>=0">
								<img  :src="`${item[counselData.myKey.images]}?x-oss-process=image/resize,m_fill,h_213,w_357`" alt="图片" mode="aspectFill" />
							</div>
						</div>
						<view class="desc-num_box">
							<view class="num">{{ item.extension_num }}人分享&nbsp;&nbsp; |&nbsp;&nbsp;获客{{ item.huoke_num }}人</view>
							<div class="item_list_bottom" v-if="$util.shieldReview()">
								<div class="shop_btn_com share_btn" @click.stop="popularize(item)">
									<i class="iconfont iconfenxiang"></i>分享
								</div>
							</div>
						</view>
					</view>
				</view>
			</slot>
		</view>
		<!-- 分享弹窗 -->
		<v-sharePoster ref="sharePoster" :type="counselData.shareType" v-if="list.data.length"></v-sharePoster>
		<view v-if="list.finished&&list.data.length!==0" class="noMore">没有更多了</view>
		<app-wrapper-empty :is-loading="list.loading" title="暂无数据内容" :is-empty="list.data.length===0" />
	</view>
</template>

<script>
import SharePoster from '@/pages/components/sharePoster'
import AppWrapperEmpty from '@/components/App_wrapper_empty'

export default {
	name: 'CounselList',
	components: {
		'v-sharePoster': SharePoster,
		AppWrapperEmpty
	},
	props: {
		list: {
			type: Object,
			default: () => {}
		},
		counselData: {
			type: Object,
			default: () => {},
			request: true
		}
	},
	data() {
		return {
			constant: this.$constant
		}
	},
	mounted() {},
	methods: {
		// 公共参数
		forParams(data) {
			return {
				id: data[this.counselData.myKey.id],
				images: data[this.counselData.myKey.images],
				title: data[this.counselData.myKey.title],
				extension_num: data.extension_num,
				huoke_num: data.huoke_num
			}
		},
		// ==进入详情==
		goDetail(val) {
			this.$emit('goDetail', val)
		},
		// ===推广获客===
		popularize(data) {
			this.$emit('popularize', data)
		}
	}
}
</script>

<style lang="scss" scoped>
	.desc-box {
		background-color: #ffffff;
		margin: 20px 20px 0;
		border-radius: 20px;
		box-shadow: 0px 2px 8px 0px rgba(241, 241, 241, 1);
		overflow: hidden;

		uni-button {
			margin: 0 0 0 10px;
		}
		& .desc-list_poster {
			padding-top: 26px;
			padding-left: 20px;
			.update_con_title {
				color: $fontColor2;
				font-size: 28px;
				margin-bottom: 20px;
			}
			.desc-info_box {
				padding-left: 0 !important;
			}
		}
		& .desc-list {
			& .desc-poster_box {
				width: 286px !important;
				height: 506px !important;
				& img {
					width: 100%;
					height: 100%;
					border-radius: 20px;
				}
			}
			& .desc-img_box {
				height: 320px;
				width: 100%;
				position: relative;

				& img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

				& .roomInfo {
					position: absolute;
					left: 0;
					bottom: 0;
					font-weight: 400;
					color: #fff;
					font-size: 24px;
					font-weight: 400;
					margin: 10px 20px;
				}
			}

			& .desc-info_box {
				padding: 20px;

				.article_wrap {
					@include direction(flex-start, space-between);
					margin-bottom: 20px;
					h3 {
						width: calc(100% - 140px);
					}

					.article_img_wrap {
						width: 216px;
						height: 130px;
						img {
							height: 100%;
						}
					}
				}

				h3 {
					font-weight: 600;
					font-size: 30px;
					color: rgba(51, 51, 51, 1);
					line-height: 45px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					& > span {
						font-size: 24px;
						font-weight: 400;
						padding: 5px;
						background-color: #f3f3fe;
						color: #2965fe;
						margin-right: 8px;

						&.red_tit {
							color: #ff6900;
							background-color: #fff5ef;
						}
					}
				}

				& .desc-num_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 10px;

					& .num {
						font-weight: 400;
						font-size: 24px;
						// padding-left: 12px;
						color: rgba(153, 153, 153, 1);
					}
				}
			}
		}
		.item_list_bottom {
			// padding-bottom: 30px;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			// margin: 30px 30px 0 0;
			.shop_btn_com {
				display: flex;
				align-items: center;
				height: 50px;
				padding: 0 24px;
				font-size: 24px;
				border-radius: 50px;
				color: #333333;
				background-color: #f5f5f5;
				margin-left: 20px;
			}
			.share_btn {
				// background: linear-gradient(90deg, #ff7d6d, #ff4444);
				font-size: 24px;
				padding: 0 24px;
            	// box-shadow: 0px 2px 4px #9D9D9D;
				.iconfenxiang {
					font-size: 26px;
				}

				i {
					margin-right: 8px;
				}

				.big_text {
					font-size: 32px;
				}
			}
		}
	}
</style>
